<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <!-- 头部 -->
    <Header></Header>
    <!-- 图片 -->
    <Pic></Pic>
    <!-- 排序 -->
    <Sort></Sort>
    <!-- 列表 -->
    <List></List>
    <!-- 底部 -->
    <Footer></Footer>

  </div>
</template>

<script>
import Header from "./components/header.vue";
import Pic from "./components/pic.vue";
import Sort from "./components/sort.vue";
import List from "./components/list.vue";
import Footer from "./components/footer.vue";

export default {
  components:{//负责注册组件( 局部组件 , 只能在当前注册的文件中使用 )
  Header,
  Pic,
  Sort,
  List,
  Footer

  }
}
</script>

<style lang="scss">
  *{
    margin: 0;
    padding: 0;
  }
  // html,body{
  //   height: 1000px;
  // }
</style>
